<template>
  <div>
    <upload-attach
      type="common"
      scope="common"
      action=""
      accept=".xls, .xlsx, .doc, .docx, .pdf, .png, .jpeg, .jpg, .pptx, .txt, .zip, .rar, .mp4, .mp3, .mav"
      limitSize="20mb"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
    >
      <template #trigger>
        <el-button type="primary">上传文件</el-button>
      </template>
    </upload-attach>
    <div style="margin-top: 5px">
      <div class="attachsItem" v-for="(item, index) in attachsObj" :key="item.url">
        <a :href="item.url" target="_blank" download>{{ item.fileName }}</a>
        <span class="attachDel" @click="attachDelFun(item, index)"
          ><i style="font-size: 12px" class="MC_iconfont MC_icon-zhuangtai-guanbi"></i
        ></span>
        <span title="预览" @click="preview(item)"
          ><i style="font-size: 14px; margin-left: 8px; cursor: pointer" class="MC_iconfont MC_icon-yulan-yulan"></i
        ></span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import uploadAttach from '@common/components/upload/index.vue'
import { ElMessage } from 'element-plus'
import previewFile from '@/common/components/preview/index'
import { handleFileType } from '@app/customer/mixins/index'
export default defineComponent({
  name: 'BaseAttachment',
  components: { uploadAttach },
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const state = reactive({
      attachsObj: [] as any
    })

    watch(
      () => props.form,
      (val) => {
        state.attachsObj = val.attachments || [] // 详情回显
      },
      { deep: true, immediate: true }
    )

    const uploadSuccess = (data: any) => {
      // 上传成功
      let param = {}
      if (data.name && data.name.indexOf('.') > -1) {
        param = handleFileType({ name: data.name, url: data.url })
      }
      state.attachsObj.push(param)
      props.form[props.data.field] = state.attachsObj
    }

    const uploadError = () => {
      // 上传失败
      ElMessage({ message: '文件上传失败，请重新选择文件上传', type: 'error' })
    }

    const attachDelFun = (item: any, index: number) => {
      state.attachsObj.splice(index, 1)
      props.form[props.data.field] = state.attachsObj
    }

    const preview = (row: any) => {
      previewFile({
        list: state.attachsObj,
        img: row,
        isHiddenDelBtn: false
      })
    }

    return {
      preview,
      attachDelFun,
      uploadError,
      uploadSuccess,
      ...toRefs(state)
    }
  }
})
</script>

<style lang="stylus" scoped>
.attachsItem
  padding 8px 9px
  font-size 12px
  line-height 12px
  background #F1F8FD
  border-radius 4px
  color #008BEE
  display inline-block
  margin 0px 10px 10px 0px
  .attachMove
    margin-right 10px
    cursor move
  .attachDel
    margin-left 10px
    cursor pointer
</style>
